<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="HandheldFriendly" content="true">
    <title>QUI Demo</title>


    <link rel="stylesheet" href="../../../../css/frozenui.css">
    <link rel="stylesheet" href="../../../css/style.css">


</head>

<body ontouchstart>
<section class="ui-container">

    <section id="grid">
        <h1 class="title">GRID</h1>
        <div class="demo-item">
            <p class="demo-desc">float网格适合多行</p>
            <div class="demo-block">
                <ul class="ui-row">
                    <li class="ui-col ui-col-50">50</li>
                    <li class="ui-col ui-col-50">50</li>
                    <li class="ui-col ui-col-25">25</li>
                    <li class="ui-col ui-col-75">75</li>
                    <li class="ui-col ui-col-33">33</li>
                    <li class="ui-col ui-col-67">67</li>
                    <li class="ui-col ui-col-20">20</li>
                    <li class="ui-col ui-col-80">80</li>
                    <li class="ui-col ui-col-10">10</li>
                    <li class="ui-col ui-col-90">90</li>
                </ul>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">flex网格</p>
            <div class="demo-block">
                <div class="ui-row-flex ui-whitespace">
                    <div class="ui-col ui-col">平均分</div>
                    <div class="ui-col ui-col">平均分</div>
                    <div class="ui-col ui-col">平均分</div>
                    <div class="ui-col ui-col">平均分</div>
                </div>
                <div class="ui-row-flex ui-whitespace">
                    <div class="ui-col ui-col-2">2/3</div>
                    <div class="ui-col">1/3</div>
                </div>
                <div class="ui-row-flex ui-whitespace">
                    <div class="ui-col ui-col-3">3/4</div>
                    <div class="ui-col">1/4</div>
                </div>
                <div class="ui-row-flex ui-whitespace">
                    <div class="ui-col ui-col-4">4/5</div>
                    <div class="ui-col">1/5</div>
                </div>
                <div class="ui-row-flex ui-whitespace">
                    <div class="ui-col ui-col-3">3/5</div>
                    <div class="ui-col ui-col-2">2/5</div>
                </div>
            </div>
        </div>

        <div class="demo-item">
            <p class="demo-desc">竖排flex</p>
            <div class="demo-block">
                <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
                    <div class="ui-col">1/2</div>
                    <div class="ui-col">1/2</div>
                </div>
                <br/>
                <div class="ui-row-flex ui-whitespace ui-row-flex-ver">
                    <div class="ui-col ui-col-3">3/4</div>
                    <div class="ui-col">1/4</div>
                </div>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">三列(无交界线)</p>
            <div class="demo-block">

                <!--  -->
                <div class="ui-grid ui-grid-trisect">
                    <ul class="ui-border-b">
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">三列</p>
            <div class="demo-block">

                <!--  -->
                <div class="ui-grid ui-grid-trisect">
                    <ul class="ui-border-b">
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                        <li>
                            <div class="ui-img-vertical">
                                <span style="background-image:url(http://placeholder.qiniudn.com/190x284)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>高尔夫<span>2.3M</span></h4>
                                <p>辅助信息</p>
                            </div>
                            <!-- <button class="ui-btn-s ui-btn-progress">免费</button> -->
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">两列</p>
            <div class="demo-block">
                <div class="ui-grid ui-grid-bisect">
                    <ul>
                        <li>
                            <div class="ui-img-horizontal">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-img-horizontal">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-img-horizontal">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                            </div>
                        </li>
                        <li>
                            <div class="ui-img-horizontal">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">两列文字</p>
            <div class="demo-block">
                <div class="ui-grid ui-grid-bisect">
                    <ul>
                        <li>
                            <div class="ui-img-horizontal">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>主要信息</h4>
                                <p>辅助信息</p>
                            </div>
                        </li>
                        <li>
                            <div class="ui-img-horizontal">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x160)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>主要信息</h4>
                                <p>辅助信息</p>
                            </div>
                        </li>
                        <li>
                            <div class="ui-img">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
                            </div>
                            <div class="ui-grid-info ui-border-r">
                                <h4>主要信息</h4>
                                <p>辅助信息</p>
                            </div>
                        </li>
                        <li>
                            <div class="ui-img">
                                <span style="background-image:url(http://placeholder.qiniudn.com/290x290)"></span>
                            </div>
                            <div class="ui-grid-info">
                                <h4>主要信息</h4>
                                <p>辅助信息</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div>
            <p class="demo-desc">banner位</p>
            <div class="ui-img-banner">
                <span style="background-image:url(http://placeholder.qiniudn.com/750x400)"></span>
            </div>
        </div>

        <div>
            <p class="demo-desc">cover位</p>
            <div class="ui-img-cover">
                <span style="background-image:url(http://placeholder.qiniudn.com/750x232)"></span>
            </div>
        </div>
        <div class="demo-item">
            <p class="demo-desc">横排图标网格</p>
            <div class="demo-block">
                <div class="ui-grid-icon ui-grid-icon-horizontal">
                    <ul>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
                            </div>
                            <h4>标题</h4>
                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/80x80)"></span>
                            </div>
                            <h4>标题</h4>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-item">
            <p class="demo-desc">三列图标网格</p>
            <div class="demo-block">
                <div class="ui-grid-icon ">
                    <ul>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-item">
            <p class="demo-desc">四列图标网格</p>
            <div class="demo-block">
                <div class="ui-grid-icon ">
                    <ul>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="demo-item">
            <p class="demo-desc">五列图标网格</p>
            <div class="demo-block">
                <div class="ui-grid-icon ">
                    <ul>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                        <li>
                            <div class="ui-img-icon">
                                <span style="background-image:url(http://placeholder.qiniudn.com/100x100)"></span>
                            </div>
                            <h5>标题</h5>
                            <p>副标题</p>

                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

</section>

<script src="http://open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script>
<script>
    var _mtac = {};
    (function () {
        var mta = document.createElement("script");
        mta.src = "http://pingjs.qq.com/h5/stats.js?v2.0.2";
        mta.setAttribute("name", "MTAH5");
        mta.setAttribute("sid", "500421336");
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(mta, s);
    })();
</script>


<script src="../../../js/lib/zepto.min.js"></script>
<script src="../../../js/index.js"></script>


</body>
</html>
